<template>
  <div class="hireratechart-item-container" :style="{ height: title === '出租率' ? '180px' : '240px' }">
    <div ref="hireChartWrapper" class="chart-item"></div>
  </div>
</template>

<script lang="ts">
  import useEcharts from '@/hooks/useEcharts'
  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
  import { dispose, graphic } from 'echarts/core'
  export default defineComponent({
    name: 'HireRate',
    props: {
      carUseRatelistamount: {
        type: Array,
      },
      amount: {
        type: Object,
      },
      title: {
        type: String,
      },
    },
    setup(props) {
      const loading = ref(true)
      const hireChartWrapper = ref<HTMLDivElement | null>(null)
      const xaxisdata = ref([])
      const yaxisdata = ref([])
      const init = () => {
        const option = {
          grid: {
            top: '10%',
            left: '30px',
            right: '1%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xaxisdata.value,
            boundaryGap: false,
            axisLabel: {
              formatter(value: any) {
                // v570 不展示年份
                if (value.length >= 10) {
                  return value.slice(5, 999)
                }
                return value
              },
              // interval: 0,
              rotate: props.title === '出租率' ? 10 : 50,
              color: function (value: any) {
                if (value.indexOf('今天') > -1) {
                  return '#3370FF'
                } else {
                  return '#1E1E1E'
                }
              },
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#E5E8EF',
              },
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              show: true,
              lineStyle: {
                color: '#23ADFF',
                width: 2,
              },
            },
          },
          yAxis: {
            type: 'value',
            offset: 13,
            axisLine: {
              show: false,
            },
            axisLabel: {
              formatter(value: any, idx: number) {
                if (idx === 0) return value
                return `${value}${props.title === '出租率' ? '%' : ''}`
              },
              color: '#1E1E1E',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#E5E8EF',
              },
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter(params) {
              const amount = params[0]
              return `<div class="tooltip-title flexable"><span>${amount.axisValue}</span><span>${
                props.amount.siteName || '全部门店'
              }</span></div><div class="content-panel">
                <span>${props.title === '出租率' ? '车辆出租率' : '预计收益'}</span><span class="tooltip-value">${formatPrice(
                amount.data
              )}${props.title === '出租率' ? '%' : '元'}</span></div>`
            },
            className: 'echarts-tooltip-diy',
          },
          series: [
            {
              data: yaxisdata.value,
              type: 'line',
              smooth: true,
              symbolSize: 12,
              emphasis: {
                focus: 'series',
                itemStyle: {
                  borderWidth: 2,
                },
              },
              lineStyle: {
                width: 3,
                color: new graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(30, 231, 255, 1)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(36, 154, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(111, 66, 251, 1)',
                  },
                ]),
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(17, 126, 255, 0.16)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 128, 255, 0)',
                  },
                ]),
              },
            },
          ],
        }
        loading.value = false
        nextTick(() => {
          useEcharts(hireChartWrapper.value as HTMLDivElement)?.setOption(option)
        })
      }
      const updateChart = () => {
        useEcharts(hireChartWrapper.value as HTMLDivElement)!.resize()
      }
      const renderdate = (date) => {
        return date < 10 ? '0' + date : date
      }
      const formatPrice = (price) => {
        return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
      watch(
        () => props.carUseRatelistamount,
        () => {
          const today = renderdate(new Date().getMonth() + 1) + '-' + renderdate(new Date().getDate())
          if (xaxisdata.value.length > 0) {
            xaxisdata.value.splice(0, xaxisdata.value.length)
            yaxisdata.value.splice(0, yaxisdata.value.length)
          }
          props.carUseRatelistamount.forEach((item) => {
            if (props.title === '出租率') {
              yaxisdata.value.push(item.data)
            } else {
              yaxisdata.value.push(item.data)
            }
            if (item.date.indexOf(today) > -1) {
              let date = item.date + '(今天)'
              xaxisdata.value.push(date)
            } else {
              xaxisdata.value.push(item.date)
            }
          })
          init()
        },
        { immediate: true, deep: true }
      )
      onMounted(() => {
        init()
        window.addEventListener('resize', () => {
          useEcharts(hireChartWrapper.value as HTMLDivElement)?.resize()
        })
      })
      onBeforeUnmount(() => {
        dispose(hireChartWrapper.value as HTMLDivElement)
      })
      return {
        loading,
        hireChartWrapper,
        updateChart,
      }
    },
  })
</script>
<style lang="less" scoped>
  .hireratechart-item-container {
    width: 100%;
    .chart-item {
      height: 100%;
    }
  }
</style>
